<template>
  <div :style="windowStyle" :class="windowFullScreenClass">
    <title-bar @exit="exitHandler" @resize="resizeHandler" />
    <iframe
      :style="iframeStyle"
      class="iframe"
      :src="src"
      frameborder="0"
    ></iframe>
  </div>
</template>

<script>
import TitleBar from "./title-bar.vue";
export default {
  components: { TitleBar },
  name: "window",
  props: {
    id: Number,
    src: String,
    type: String,
  },
  computed: {
    windowStyle() {
      const style = {};
      if (this.src) {
        style.display = "flex";
      } else {
        style.display = "none";
      }
      return style;
    },
    windowFullScreenClass() {
      if (this.fullScreen) {
        return "window";
      } else {
        if (this.type === 'mobile') {
            return "not-full-window mobile";
        } else {
            return "not-full-window desktop";
        }
      }
    },
    iframeStyle() {
      if (this.src) {
        return {
          display: "block",
        };
      } else {
        return {
          display: "none",
        };
      }
    },
  },
  data() {
    return {
      fullScreen: false,
    };
  },
  methods: {
    exitHandler() {
      this.$emit("exit");
    },
    resizeHandler() {
      this.fullScreen = !this.fullScreen;
    },
  },
};
</script>
<style scoped>
.window {
  height: 100%;
  width: 100%;
  position: absolute;
  display: flex;
  flex-direction: column;
  z-index: 9999;
  background-color: white;
}
.desktop {
  height: 680px;
  width: 1024px;
  margin-top: -340px;
  margin-left: -512px;
}
.mobile {
  height: 640px;
  width: 360px;
  margin-top: -320px;
  margin-left: -180px;
}
.not-full-window {
  z-index: 9999;
  position: absolute;
  left: 50%;
  top: 50%;
  display: flex;
  flex-direction: column;
  background-color: white;
}
.iframe {
  height: 100%;
  width: 100%;
  position: relative;
  z-index: 1;
}
</style>